<!--这是添加求 资金 组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox">
			<h3 class="fixTitle" >
				<span>发布资源</span>
				<p>
					<em style="cursor: pointer;" ><svg-icon icon-class="jian" class="font-size16"/></em><em style="cursor: pointer;"><svg-icon class="font-size16" icon-class="fullScreen" /></em><em style="cursor: pointer;" @click="closeAdd"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<div style="margin-top: 40px;">
				<div style="padding-top: 10px;">
					<p class="title">发布 求 资金</p>
					<el-upload style="margin: 0 30px"
					  action=""
					  list-type="picture-card"
					  :on-preview="handlePictureCardPreview"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>所求标题:</label><el-input v-model="title" placeholder="请输入所求标题（不超过15个字）" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>一句话简介:</label><el-input v-model="itemIntro" placeholder="请输入简介（不超过40个字）" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>需求金额:</label><el-input v-model="capital" placeholder="单位为元" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>融资方式:</label>
						<el-select  style="width: 350px;" v-model="selectType" placeholder="请选择">
						    <el-option v-for="item in typeOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<div class="label-p">
						<label for="" style="float: left;">所在地区:</label>
						<v-distpicker :province="citySelect.province" :city="citySelect.city" :area="citySelect.area" style="float: left;"></v-distpicker>
					</div>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>使用时间:</label>
						<el-date-picker type="datetime" format="yyyy-MM-dd" placeholder="请选择时间" v-model="use_time">
		               </el-date-picker>
					</p>
					<p class="label-p">
						<label for="">所处行业:</label>
						<el-select  style="width: 350px;" v-model="selectTrade" placeholder="请选择">
						    <el-option v-for="item in tradeOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for="">项目所处阶段:</label>
						<el-select  style="width: 350px;" v-model="selectStage" placeholder="请选择">
						    <el-option v-for="item in stageOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p">
						<label for="">以往融资情况:</label>
						<el-select  style="width: 350px;" v-model="selectFinance" placeholder="请选择">
						    <el-option v-for="item in financeOption"
							      :key="item.id"
							      :label="item.value"
							      :value="item.value"></el-option>
						</el-select>
					</p>
					<p class="label-p" >
						<label for=""><span style="color: red">*</span>资金用途:</label><el-input v-model="uses" placeholder="请详细介绍您希望资金用在什么领域(不超过100个字)" style="width: 350px;"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>发起人姓名:</label><el-input v-model="contactName" placeholder="请填写联系人真实姓名" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>身份证号:</label><el-input v-model="contactIdNum" placeholder="请填写联系人身份证号" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for=""><span style="color: red">*</span>手机号:</label><el-input v-model="phone" placeholder="请填写联系方式" style="width: 350px"></el-input>
					</p>
					<p class="label-p">
						<label for="">微信号:</label><el-input v-model="wechatNum" placeholder="请填写微信号" style="width: 350px"></el-input>
					</p>
				</div>
				<p style="text-align: center;line-height: 50px;margin-top: 10px;">
					<el-button type="primary">保存</el-button>
					<el-button type="info" @click="closeAdd">取消</el-button>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import Sticky from '@/components/Sticky'
import VDistpicker from 'v-distpicker' // 引入城市选择器插件
export default {
  components: {
    Sticky,
    VDistpicker
  },
  data() {
    return {
      title: null, // 所求标题
      itemIntro: null, // 项目一句话简介
      capital: null, // 需求金额
      selectType: null, // 融资方式
      citySelect: { province: '', city: '', area: '' }, // 所在地区 非必填
      use_time: null, // 使用时间
      selectTrade: null, // 所处行业 非必填
      selectStage: null, // 所处阶段 非必填
      selectFinance: null, // 以往融资情况 非必填
      uses: null, // 资金用途
      contactName: null, // 联系人姓名
      contactIdNum: null, // 身份证号
      phone: null, // 联系方式
      wechatNum: null, // 微信号 非必填
      dialogImageUrl: '',
      dialogVisible: false,
      typeOption: [ // 融资方式选择
        {
          id: 0,
          value: '不限'
        },
        {
          id: 1,
          value: '股权'
        },
        {
          id: 2,
          value: '债券'
        },
        {
          id: 3,
          value: '众筹'
        }
      ],
      tradeOption: [
        {
          id: 0,
          value: '医疗'
        },
        {
          id: 1,
          value: '互联网'
        },
        {
          id: 2,
          value: '文化旅游'
        },
        {
          id: 3,
          value: '高科技'
        },
        {
          id: 4,
          value: '房地产'
        },
        {
          id: 5,
          value: '金融'
        },
        {
          id: 6,
          value: '其他'
        }
      ],
      stageOption: [
        {
          id: 0,
          value: '未开发'
        },
        {
          id: 1,
          value: '原型设计'
        },
        {
          id: 2,
          value: '产品开发'
        },
        {
          id: 3,
          value: '已上线'
        }
      ],
      financeOption: [
        {
          id: 0,
          value: '未融资'
        },
        {
          id: 1,
          value: '天使轮'
        },
        {
          id: 2,
          value: 'A轮'
        },
        {
          id: 3,
          value: 'B轮'
        },
        {
          id: 4,
          value: 'C轮'
        },
        {
          id: 5,
          value: 'C轮以上'
        }
      ]
    }
  },
  methods: {
    closeAdd() {
      this.$emit('hideBegFinance', false)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
	p,h3,h1 {margin:0;padding:0}
	h3 em{
		padding: 0 5px;
		font-style: normal;
	}
	h3 em:hover{
		color: #0E90D2;
	}
	.font-size16{
		font-size: 16px;
	}
	.fixTitle{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		position: fixed;
		width: 700px;
		line-height: 36px;
		padding: 0 10px;
		z-index: 98;
	}
	.fixTitle p{
		position: absolute;
		right: 20px;
		top: 0px;
	}
	.filter {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 90;
	}
	.addBox {
		width: 700px;
		height: 500px;
		overflow: auto;
		background: #fff;
		position: fixed;
		left: 25%;
		top: 15%;
		z-index: 120;
	}
	.text-c{
		text-align: center;
	}
	.title{
		font-size: 18px;
		line-height: 36px;
		padding: 0 10px;
	}
	label {
		font-weight: 500;
		width: 150px;
		display: inline-block;
		text-align: right;
		margin-right: 30px;
	}
	.label-p{
		line-height: 50px;
		overflow: hidden;
	}
	.el-checkbox{
	    width: 75px;
        margin-left: 0; 
	}
</style>